<template>
	<view class="content">
		<view class="form">
			<view class="form-item">
				<view class="icon iconfont icon-shoujitianchong"></view>
				<input v-model="form.mobile" maxlength="11" class="form-input" type="number" placeholder="请输入您的手机号"
					placeholder-class="placeholder-style" />
			</view>
			<view class="form-item">
				<view class="icon iconfont icon-yanzhengmamima"></view>
				<input v-model="form.code" class="form-input" type="text" placeholder="请输入您收到的验证码"
					placeholder-class="placeholder-style"  />
				<button @click="codeSend" size="mini" class="btn" v-if="!countdown">获取验证码</button>
				<button size="mini" class="btn" disabled v-else>{{countdown}}秒后重新获取</button>
			</view>
			<view class="form-item">
				<view class="icon iconfont icon-mima"></view>
				<input v-model="form.password" class="form-input" type="password" placeholder="请输入您的登录密码"
					placeholder-class="placeholder-style" v-if="!showPassword" />
				<input v-model="form.password" class="form-input" type="text" placeholder="请输入您的登录密码"
					placeholder-class="placeholder-style" v-else />
				<uni-icons type="eye-filled" :size="24" v-if="showPassword"
					@tap="showPassword = !showPassword"></uni-icons>
				<uni-icons type="eye-slash-filled" :size="24" v-else @tap="showPassword = !showPassword"></uni-icons>
			</view>
			<view class="form-item">
				<view class="icon iconfont icon-mima"></view>
				<input v-model="form.password2" class="form-input" type="password" placeholder="请再次输入您的登录密码"
					placeholder-class="placeholder-style" v-if="!showPassword2" />
				<input v-model="form.password2" class="form-input" type="text" placeholder="请再次输入您的登录密码"
					placeholder-class="placeholder-style" v-else />
				<uni-icons type="eye-filled" :size="24" v-if="showPassword2"
					@tap="showPassword2 = !showPassword2"></uni-icons>
				<uni-icons type="eye-slash-filled" :size="24" v-else @tap="showPassword2 = !showPassword2"></uni-icons>
			</view>
			<view class="btn-area">
				<button @click="submit" class="btn-login">确认修改</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		changepassword,
		sendCode
	} from '../../network/login.js';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	const form = reactive({
		mobile: '',
		code: '',
		password: '',
		password2: ''
	})
	const timer1 = ref(null)
	const timer2 = ref(null)
	const countdown = ref('')
	const codeSend = () => {
		if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				title: '请输入正确的手机号码 '
			})
			return false;
		}
		let data = {
			mobile: form.mobile,
			event: 'resetpwd'
		}
		sendCode(data).then(res => {
			countdown.value = 60;
			timer1.value = setInterval(() => {
				countdown.value -= 1;
			}, 1000)
			timer2.value = setTimeout(() => {
				clearInterval(timer1.value);
				countdown.value = null;
			}, 60000)
			uni.showToast({
				title:'发送成功',
				icon:'none'
			})
		})
	}
	const showPassword = ref(false)
	const showPassword2 = ref(false)
	const submit = ()=>{
		const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
		if (!reg.test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				title: '请输入正确格式的手机号码 '
			})
			return false;
		}
		if (!form.code) {
			uni.showToast({
				icon: 'none',
				title: '请输入验证码'
			})
			return false;
		} 
		if (form.password != form.password2) {
			uni.showToast({
				icon: 'none',
				title: '两次输入的密码不一致'
			})
			return false;
		}
		let data = {
			type:'mobile',
			mobile:form.mobile,
			newpassword:form.password,
			captcha:form.code
		}
		changepassword(data).then(res=>{
			uni.showToast({
				title:'密码已修改'
			})
			setTimeout(()=>{
				uni.navigateBack({
					delta:1
				})
			},300)
		})
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
	}

	.form {
		position: relative;
		padding: 30rpx 48rpx 0 48rpx;
		margin-top: 100rpx;

		.form-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 2rpx solid #dcdfe6;
			margin-bottom: 30rpx;

			.icon {
				color: #f6bf00;
				font-size: 40rpx;
			}

			.form-input {
				flex: 1;
				height: 100%;
				padding: 0 20rpx;
				font-size: 32rpx;
			}

			.btn {
				width: 200rpx;
				height: 60rpx;
				padding: 0;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}

	.btn-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30rpx;
		margin-top: 60rpx;

		.btn-login {
			background-color: #f6bf00;
			color: #333;
			font-size: 28rpx;
			height: 80rpx;
			width: 600rpx;
			line-height: 80rpx;
		}
	}
</style>